<style>
    /* 打开宽度限制 */
    .popover {
        max-width: 90vw;
    }
</style>
<div id="billdrawer">
    <div class="container-fluid">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="alert alert-dismissable alert-info" id="headeralert">
                    <button type="button" class="close">×</button>
                    <p></p>
                </div>
            </div>
        </div>
        <div class="ntDesktop">
            {if condition="$isshow==1"}
            <div class="ntDesktop-head">销售财务界面（开票员-银行单）</div>
            {/if}
            <div class="row" style="padding-top:0px">
                <div class="col-md-7">
                    <ul class="nav nav-tabs">
                        <li class="active" @click="changestatus(1)">
                            <a href="#new" data-toggle="tab">
                                + 待开票 <span class="label label-info">{{countnum.countnumone}}</span>
                            </a>
                        </li>
                        <li @click="changestatus(2)">
                            <a href="#finish" data-toggle="tab">
                                + 已完成 <span class="label label-default">{{countnum.countnumtwo}}</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-5">
                    <div class="col-md-8">
                        <div class="input-group">
                            <input type="text" class="form-control" @keyup.13="render" v-model="dname"
                                   placeholder="输入公司名或订单号">
                            <div class="input-group-btn">
                                <button class="btn btn-primary" @click="render"><span class="fa fa-search"></span> 查找
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 text-right">
                        <button class="btn btn-primary"><span class="fa fa-print"></span>打印</button>
                    </div>
                </div>
            </div>

            <div class="row tab-content">

                <!-- 收款 待开票银行单 列表 -->
                <div class="col-md-12 tab-pane active" id="new">
                    <table class="table table-striped table-hover ntTable">
                        <thead>
                        <tr>
                            <th width="4%"> 订单号</th>
                            <th width="4%"> 优先级</th>
                            <th width="20%"> 公司名称</th>
                            <th> 发票</th>
                            <th> 时间</th>
                            <th> 银行单</th>
                            <th> 收款账号</th>
                            <th> 金额</th>
                            <th> 业务员</th>
                            <th> 编辑</th>
                            <th> 备注</th>
                            <th> 操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in list" :key="item.id"v-for="item in list" :key="item.id">
                            <td><span v-if="item.sale_id">{{formatUnit(item.sale_id,'ID')}}</span></td>
                            <td align="center"><span class="label label-info"
                                                     v-if="item.sale_id">{{item.priority}}</span></td>
                            <td>
                                <span v-if="item.sale_id">{{item.company_name}}</span><br>
                                <span v-if="item.sale_id" class="label label-info">{{item.company_branch_name}}</span>
                            </td>
                            <td>
                                <span class="f-1">{{item.number}}</span><br>
                                <small>{{item.drawername}} / {{item.drawer_date}}</small>
                            </td>
                            <td class="text-success"><b>{{item.interval_time}}</b></td>
                            <td align="right">{{item.numone}}
                                <small class="unit">BILL</small>
                            </td>
                            <td>
                                {{item.account_banknumber}} <br>
                                {{item.account_bankname}}
                            </td>
                            <td align="right">{{formatUnit(item.amount,'BRL')}}
                                <small class="unit">BRL</small>
                            </td>
                            <td>{{item.saler_name}}</td>
                            <td>{{item.managename}}<br>
                                <small>{{item.update_date}}</small>
                            </td>
                            <td>
                                <button @mouseover="setpopper" v-if="item.remark.length>0" class="btn btn-sm btn-default"
                                        data-toggle="popover" title="付款登记（8888）备注">
                                    备注
                                    <div class="content">
                                        <div style="width:30vw">
                                            <ul>
                                                <li v-for="remarkname in item.remark" :key="remarkname.id">
                                                    {{remarkname.remark}}
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </button>
                            </td>
                            <td align="right">
                                {in name="260" value="$Think.session.admin.auth_ids"}
                                <button v-if="item.sale_id" class="btn btn-sm btn-primary"
                                        @click="achieve(item.sale_id,1)" data-toggle="modal"
                                        data-target="#bill_editModal">
                                    银行单
                                </button>
                                {/in}
                            </td>
                        </tr>
                        <tr style="text-align: center;" v-if="list.length==0">
                            <td colspan="12" class="no_date">{:strtoupper(lang('no_data'))}</td>
                        </tr>
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="14" align="right">列表金额合计: {{formatUnit(sumcount,'BRL')}}
                                <small class="unit">BRL</small>
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                    <div class="row clearfix">
                        <div class="col-md-12 column">
                            <ul class="pagination" id="paginationone" v-show="list.length!=0">
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- 财务 完成登记银行单 列表 -->
                <div class="col-md-12 tab-pane" id="finish">
                    <table class="table table-striped table-hover ntTable">
                        <thead>
                        <tr>
                            <th width="4%"> 订单号</th>
                            <th width="20%"> 公司名称</th>
                            <th> 收款账号</th>
                            <th> 收款日期</th>
                            <th> 金额</th>
                            <th> 银行单</th>
                            <th> 编辑</th>
                            <th> 备注</th>
                            <th> 操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in list" :key="item.id">
                            <td><span v-if="item.sale_id">{{formatUnit(item.sale_id,'ID')}}</span></td>
                            <td>
                                <span v-if="item.sale_id">{{item.company_name}}</span><br>
                                <span class="label label-info" v-if="item.sale_id">{{item.company_branch_name}}</span>
                            </td>
                            <td>
                                {{item.account_banknumber}} <br>
                                {{item.account_bankname}}
                            </td>
                            <td>{{item.paydate}}</td>
                            <td align="right">{{formatUnit(item.amount,'BRL')}}
                                <small class="unit">BRL</small>
                            </td>
                            <td>
                                {{item.number}}<br>
                                {{item.create_name}}<br>
                                <small>{{item.create_date}}</small>
                            </td>
                            <td>{{item.managename}}<br>
                                <small>{{item.update_date}}</small>
                            </td>
                            <td>
                                <button @mouseover="setpopper" v-if="item.remark.length>0" class="btn btn-sm btn-default"
                                        data-toggle="popover" title="备注详情">
                                    备注
                                    <div class="content">
                                        <div style="width:40vw">
                                            <ul>
                                                <li v-for="remarkname in item.remark" :key="remarkname.id">
                                                    {{remarkname.remark}}
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </button>
                            </td>
                            <td align="right">
                                {in name="261" value="$Think.session.admin.auth_ids"}
                                <button v-if="item.editdel==1" @click="achieve(item.saleid,2)" class="btn btn-sm btn-primary" data-toggle="modal"
                                        data-target="#bill_editModal">
                                    编辑
                                </button>
                                {/in}
                                {in name="262" value="$Think.session.admin.auth_ids"}
                                <button v-if="item.del_at==0 && item.editdel==1" @click.prevent="delbtn(item.id,1)"
                                        class='btn btn-sm btn-default'>{:strtoupper(lang('delete'))}
                                </button>

                                <button v-else="item.del_at>=0 && item.editdel==1" class='btn btn-sm btn-danger option-clear'
                                        @click.prevent="delbtn(item.id,2)">{:strtoupper(lang('clear'))}
                                </button>
                                {/in}
                            </td>
                        </tr>
                        <tr style="text-align: center;" v-if="list.length==0">
                            <td colspan="9" class="no_date">{:strtoupper(lang('no_data'))}</td>
                        </tr>
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="14" align="right">列表金额合计: {{formatUnit(sumcount,'BRL')}}
                                <small class="unit">BRL</small>
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                    <div class="row clearfix">
                        <div class="col-md-12 column">
                            <ul class="pagination" id="paginationtwo" v-show="list.length!=0">
                            </ul>
                        </div>
                    </div>
                </div>

            </div>


        </div>
    </div>
    <div class="modal fade" id="bill_editModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" style="width:70%">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">付款登记（8888）银行单编辑</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="row clearfix">
                            <div class="col-md-12 column">
                                <div class="alert alert-dismissable alert-info">
                                    <button type="button" class="close">×</button>
                                    <p></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-hover ntTable">
                                <tbody>
                                <tr>
                                    <td>订单号</td>
                                    <td colspan="3">{{formatUnit(leftdata.sale_id,'ID')}}</td>
                                </tr>
                                <tr>
                                    <td>公司</td>
                                    <td class="text-primary">{{leftdata.company_name}}</td>
                                </tr>
                                <tr>
                                    <td>营业号</td>
                                    <td>{{leftdata.regno?leftdata.regno:'-'}}</td>
                                </tr>
                                <tr>
                                    <td>税号</td>
                                    <td>{{leftdata.taxno?leftdata.taxno:'-'}}</td>
                                </tr>
                                <tr>
                                    <td>分公司</td>
                                    <td class="text-primary">{{leftdata.co_branch_name?leftdata.co_branch_name:'-'}}
                                    </td>
                                </tr>
                                <tr>
                                    <td>营业号</td>
                                    <td>{{leftdata.regnos?leftdata.regnos:'-'}}</td>
                                </tr>
                                <tr>
                                    <td>税号</td>
                                    <td>{{leftdata.taxnos?leftdata.taxnos:'-'}}</td>
                                </tr>
                                <tr>
                                    <td>发票</td>
                                    <td>
                                        <span class="text-primary f-1">{{leftdata.number}}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>开票人</td>
                                    <td>{{leftdata.createname}} / {{leftdata.createdate}}</td>
                                </tr>
                                <tr>
                                    <td>存入账号</td>
                                    <td>
                                        {{leftdata.accountname?leftdata.accountname:'-'}} <br>
                                        {{leftdata.accountnum?leftdata.accountnum:'-'}}
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="col-md-6">
                            <table class="table table-hover ntTable">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>收款日期</th>
                                    <th>金额</th>
                                    <th width="50%">银行单号<span class="required"></span></th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(item,index) in rightdata" :key="item.id">
                                    <td align="center">{{index+1}}</td>
                                    <td>{{item.pay_date}}</td>
                                    <td align="right">{{formatUnit(item.amount,'BRL')}}
                                        <small class="unit">BRL</small>
                                    </td>
                                    <td><input :disabled="item.isdisables" type="text" class="form-control"
                                               v-model="item.number"></td>
                                </tr>
                                <tr style="text-align: center;" v-if="rightdata.length==0">
                                    <td colspan="4" class="no_date">{:strtoupper(lang('no_data'))}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span
                            class="glyphicon glyphicon-remove"></span>取消
                    </button>
                    <button @click="savebtn" type="button" class="btn btn-primary"
                            style="padding-left:24px;padding-right:24px">
                        <span class="fa fa-save"></span>保存
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- InstanceBeginEditable name="EditModal" -->
<!--添加弹窗部分 开始-->
<!-- 销售财务 银行单 编辑开始 -->

{include file="public/foot"/}

<!--弹窗部分 结束-->
<script>
    var table = new Vue({
        el: '#billdrawer',
        data: {
            list: [],
            status: '1',
            page: '1',
            pageSize: 30,
            dname: '',
            //头部数字
            countnum: {
                countnumone: '',
                countnumtwo: '',
            },
            leftdata: {},
            rightdata: {},
        },
        //列表总金额
        computed: {
            sumcount(){
                var s = 0;
                this.list.forEach(e => {
                    s += e.amount;
                });
                return s;
            }
        },
        methods: {
            formatUnit: formatUnit,
            setPage(pageCurrent, pageSum, pagination) {
                //数据总条数
                var myPageCount = pageSum;
                //一页显示多少条
                var myPageSize = this.pageSize;
                //总页数
                var countindex = myPageCount % myPageSize > 0 ? (myPageCount / myPageSize) + 1 : (myPageCount / myPageSize);
                $.jqPaginator(pagination, {
                    totalPages: parseInt(countindex),
                    //最多显示多少页
                    visiblePages: 5,
                    //默认显示第几页
                    currentPage: pageCurrent,
                    first: '<li class="first"><a href="javascript:;">' + langcon.page_home + '</a></li>',
                    prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>' + langcon.previous_page + '</a></li>',
                    next: '<li class="next"><a href="javascript:;">' + langcon.next_page + '<i class="arrow arrow3"></i></a></li>',
                    last: '<li class="last"><a href="javascript:;">' + langcon.last_page + '</a></li>',
                    page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
                    all: '<li class="page"><a href="javascript:;">' + myPageCount + ' / ' + this.page + 'PG , ' + this.pageSize + ' /PG</a></li>',
                    onPageChange: (num, type) => {
                        if (type == "change") {
                            this.page = num
                            this.getAllList()
                        }
                    }
                });
            },
            //数据所有获取
            getAllList(){
                $('.loding').show();
                $.ajax({
                    url: "/admin/finance/drawerbill",
                    type: 'post',
                    data: {
                        status: this.status,//页面标签
                        getdata: '',//获取标志
                        dname: this.dname,//搜索
                        page: this.page,
                        pageSize: this.pageSize,
                    },
                    dataType: "json",
                    success: (result) => {
                        $('.loding').hide();
                        let arr = [];
                        result.data.forEach(item => {
                            let index = $.inArray(item.sale_id, arr);
                            if (index >= 0) {
                                item.sale_id = '';
                            }
                            arr.push(item.sale_id);
                        })
                        this.list = result.data;
                        this.countnum.countnumone = result.arrcount.one;
                        this.countnum.countnumtwo = result.arrcount.two;
                        let pagination = '';
                        if (this.status == 1) {
                            pagination = '#paginationone';
                        } else if (this.status == 2) {
                            pagination = '#paginationtwo';
                        }
                        if (result.count) {
                            $('.loding').hide()
                            this.setPage(parseInt(this.page), result.count, pagination)
                        }
                    }
                })
            },
            //查找
            render(){
                //搜索条件满足才进行搜索
                this.getAllList()
            },
            //标签切换
            changestatus(status){
                this.status = status;
                this.getAllList()
            },
            //隐藏需要隐藏的部分
            datapopover(){
                $.each($("[data-toggle='popover']"), (key, value) => {
                    $(value).find(".content").hide();

                })
            },
            //设置popper组件的配置
            setpopper(e){
                $(e.target).popover({
                    trigger: 'hover focus manual',
                    placement: ($(e.target).attr("placement") == undefined) ? 'left' : $(e.target).attr("placement"),
                    //placement:'left',
                    title: $(e.target).attr("title"),
                    html: 'true',
                    content: $(e.target).find(".content").html(),
                    animation: false
                });
            },
            timer(){
                if (this.status == 1) {
                    this.list.forEach(e => {
                        var start = e.interval_time.split(":");
                        var one = start[0];//小时
                        var two = start[1];//分
                        var three = start[2];//秒
                        three++
                        if (three == 60) {
                            two++;
                            if (two == 60) {
                                one++
                                two = 0
                            }
                            three = 0
                        }
                        if (one.toString().length == 1) {
                            one = '0' + one
                        }
                        if (two.toString().length == 1) {
                            two = '0' + two
                        }
                        if (three.toString().length == 1) {
                            three = '0' + three
                        }
                        e.interval_time = one + ':' + two + ":" + three
                    });
                }
            },
            //点击银行单 和编辑
            achieve(sale_id,code){
                var requesturl=''
                if(code==1){
                    requesturl='bankbill';
                }else {
                    requesturl='editbill';
                }
                $.ajax({
                    url: "/admin/finance/"+requesturl,
                    type: 'post',
                    data: {
                        sale_id,
                    },
                    dataType: "json",
                    success: (result) => {
                        console.log(result);
                        this.leftdata = result.leftdata;
                        this.rightdata = result.rightdata;
                    }
                })
            },
            //对数据进行保存
            savebtn(){
                $.ajax({
                    url: "/admin/finance/drawerbill",
                    type: 'post',
                    data: {
                        savebtn: '',
                        right: this.rightdata
                    },
                    dataType: "json",
                    success: (result) => {
                        if (result.status != 1) {
                            change_mes_type('.modal-body .alert', result.status)
                            $('.modal-body .alert').show()
                            $('.modal-body .alert p').html('*' + result.msg + '<br>')
                        } else {
                            if (result.status == 1) {
                                this.getAllList();
                            }
                            change_mes_type('#headeralert', result.status)
                            $('#headeralert').show()
                            $('#headeralert p').html('*' + result.msg + '<br>')
                            $('#bill_editModal').modal('toggle')
                        }
                    }
                })
            },
            //点击删除付款安排
            delbtn(id, code){
                $.ajax({
                    url: "/admin/finance/delbill",
                    type: 'post',
                    data: {
                        id,
                        code
                    },
                    dataType: "json",
                    success: (result) => {
                        change_mes_type('#headeralert', result.status)
                        $('#headeralert').show()
                        $('#headeralert p').html(result.msg)
                        if (result.status == 1) {
                            this.getAllList()
                        }

                    }
                })
            }
        },
        created(){
            setInterval(this.timer, 1000);
            this.getAllList();//数据
            this.datapopover();//插件
        }
    })
    $("#bill_editModal").on("hidden.bs.modal", function () {
        $(this).removeData("bs.modal");
        $(document).unbind('keydown')
    });
</script>